<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-scroll-container">
      <switch-normal v-model="commonAttr.isVertical" label="纵向" @change="onChangeAttr"></switch-normal>
      <template v-if="commonAttr.isVertical">
        <switch-normal v-model="commonAttr.isTouchMove" label="拖动" @change="onChangeAttr"></switch-normal>
        <template v-if="commonAttr.isTouchMove">
          <input-normal label="移动速度" placeholder="移动速度" v-model="commonAttr.speed" @change="onChangeAttr"></input-normal>
          <input-normal label="泡泡url" placeholder="url,宽度,高度" v-model="commonAttr.bubbleUrl" @change="onChangeAttr"></input-normal>
          <input-normal label="效果url" placeholder="url,宽度,高度" v-model="commonAttr.effectUrl" @change="onChangeAttr"></input-normal>
          <switch-normal label="是否可以取消选择" v-model="commonAttr.isUnSelect"  @change="onChangeAttr"></switch-normal>
          <el-button type="primary"  @click.stop="onAddItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
                <template #title>
                图标组{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
              </template>
              <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="图片地址" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
              <add-img-con :url="item.selectUrl" picAttr="selectUrl" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="选中图片地址" v-model="item.selectUrl" @change="onUpdateItem(index)"></input-normal>
              <add-img-con :url="item.resultUrl" picAttr="resultUrl" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
              <input-normal label="结果图片地址" v-model="item.resultUrl" @change="onUpdateItem(index)"></input-normal>
              <input-normal label="x,y,wid,hei" v-model="item.position" @change="onUpdateItem(index)"></input-normal>
            </el-collapse-item>
          </el-collapse>
        </template>
        <template v-else-if="commonAttr.relateAttrCompId">
          <textarea-normal label="截图背景图片组" placeholder="背景,框上部,框中部拉伸,框下部的Url" v-model="commonAttr.cropUrls" @change="onChangeAttr"></textarea-normal>
          <textarea-normal label="截图背景图片组高度" placeholder="背景,框上部,框中部拉伸,框下部的Url高度" v-model="commonAttr.cropUrlsHeight" @change="onChangeAttr"></textarea-normal>
          <textarea-normal label="截图背景图片组偏移量" placeholder="背景,框上部,框中部拉伸,框下部的Url偏移量" v-model="commonAttr.cropUrlsOffset" @change="onChangeAttr"></textarea-normal>
          <switch-normal label="是否垂直居中" v-model="commonAttr.isVerticalCenter"  @change="onChangeAttr"></switch-normal>
        </template>
        <template v-else>
          <p class="margin-left-right-16">可拖动图片</p>
          <add-img-con :url="commonAttr.url" comAttr="commonAttr" picAttr="url" :isCrop="true" :isDelete="true" :height="100" class="margin-left-right-16"></add-img-con>
          <input-normal label="图片地址" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
          <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
          <el-divider content-position="center">高级属性</el-divider>
          <textarea-normal label="代码片段" v-model="commonAttr.innerHtml" @change="onChangeAttr"></textarea-normal>
          <dropdown-normal label="滚动条颜色" :valLists="SCROLLBER_TYPE" v-model="commonAttr.scrollbarType" @change="onChangeAttr"></dropdown-normal>
        </template>
      </template>
      <template v-else>
        <input-normal label="图片关联组件id" v-model="commonAttr.imgRelateCompId" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.slidesPerView" label="每页显示项数" :max="10" :step="1" @change="onChangeAttr"></slider-normal>
        <p class="margin-left-right-16">项背景</p>
        <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
        <input-normal label="拖拽项背景宽度" v-model="commonAttr.bgWidth" @change="onChangeAttr"></input-normal>
        <input-normal label="拖拽项背景高度" v-model="commonAttr.bgHeight" @change="onChangeAttr"></input-normal>
        <input-normal label="拖拽项宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
        <input-normal label="拖拽项高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
        <el-button type="primary"  @click.stop="onAddItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
              <template #title>
              轮播组{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
            </template>
            <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
          </el-collapse-item>
        </el-collapse>
      </template>
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'

import { editUtils } from '@/views/js/edit-utils'

export default {
  name: "RightScrollContainer",
  mixins: [editUtils],
  components: {
    RightTemplate,
    InputNormal,
    TextareaNormal,
    AddImgCon,
    SwitchNormal,
    SliderNormal,
    ColorNormal,
    DropdownNormal,
  },
}
</script>
